<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小u课堂</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="./img/index/logo.png" alt="" class="logo">
            <ul class="">
                <li class="check"><a href="javascript:;">首页</a></li>
                <li><a href="./pages/online.html">同步课程</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input id="keyword" type="text" placeholder="搜索感兴趣的内容">
                <img id="search-btn" src="./img/index/search.png" alt="">
            </div>
            <div class="login">
                <a href="./pages/loginAndRegister/login.html">登陆</a>
                /
                <a href="./pages/loginAndRegister/register.html">注册</a>
            </div>
            <div class="user">
                <img src="./img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li>课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li>个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体内容 -->
    <main>
        <!-- banner -->
        <div class="banner">
            <ul class="img">
                <!-- <li class="active"><img src="./img/index/tbanner1.png" alt=""></li>
                <li><img src="./img/index/tbanner1.png" alt=""></li>
                <li><img src="./img/index/tbanner3.png" alt=""></li> -->
            </ul>
            <ul class="list">
                <!-- <li class="high">24小时不断电大课堂</li>
                <li>内容不够2</li>
                <li>内容不够3</li> -->
            </ul>
        </div>

        <!-- 同步课程 -->
        <div class="online">
            <div class="title">
                <span class="line"></span>
                <span class="cont">同步课程</span>
                <span class="more">更多课程<i class="iconfont icon-right1"></i>
                </span>
            </div>
            <div class="onlineCont">
                <div class="content">
                    <ul id="course-type-1">
                        <!-- <li>
                            <div class="top">
                                <span class="rj">人教版</span>
                                <img src="./img/index/banner1.png" alt="" class="m">
                                <p>学科：英语</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>行政管理专业班</span>
                                    <span class="time">地区：北京</span>
                                </div>
                                <div class="right">免费学习</div>
                            </div>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>

        <!-- 页面广告 -->
        <div class="contBanner">
            <img src="./img/index/WechatIMG20.png" alt="">
        </div>


        <!-- 精品课程 -->
        <div class="goodClass">
            <div class="title">
                <span class="line"></span>
                <span class="cont">精品课程</span>
                <span class="more">更多课程<i class="iconfont icon-right1"></i>
                </span>
            </div>
            <div class="onlineCont">
                <div class="content">
                    <ul id="course-type-2">
                        <!-- <li>
                            <div class="top">
                                <span class="rj">人教版</span>
                                <img src="./img/index/banner1.png" alt="" class="m">
                                <p>学科：英语</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>行政管理专业班</span>
                                    <span class="time">地区：天津</span>
                                </div>
                                <div class="right">50元</div>
                            </div>
                        </li> -->
                    </ul>
                </div>
                <div class="rightCont">
                    <img src="./img/index/good_banner7.png" alt="">
                </div>
            </div>
        </div>
        <form action="" enctype="multipart/form-data"></form>
        <div class="footB">
            <div><img src="./img/index/foot1.png" alt=""></div>
            <div><img src="./img/index/foot2.png" alt=""></div>
        </div>

        <div class="fix">
            <div class="lesson">
                <img src="./img/index/mylesson.png" alt="">
            </div>
            <div class="top">
                <img src="./img/index/gotop.png" alt="">
            </div>
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/ujiuye.js"></script>
    <script src="js/index.js"></script>
    <script>
        $(function() {
            //1.加载轮播图
            function initBanner() {
                //发送请求， 获取轮播图数据
                $.ajax({
                    url: "http://192.168.11.206:3000/banners",
                    type: "GET",
                    success: function(dat) {
                        if(dat.errorCode === 200) {
                            //循环轮播图数据
                            dat.data.forEach( value => {
                            //DOM渲染，添加轮播图片
                            let $li = $("<li>")
                            let $img = $("<img>").prop("src", value.image_src)
                            $li.append($img)
                            $(".img").append($li)
                            //DOM渲染，添加标题数据
                            let $litxt = $("<li>").text(value.title)
                            $(".list").append($litxt)
                            })
                            $(".img li").eq(0).addClass("active")
                            lunBoTu()
                        }
                    }
                })
            }
            
            // 2.加载同步课程
            function initSyncCourse() {
                $.ajax({
                    url: "http://192.168.11.206:3000/course/sync",
                    type: "GET", 
                    success: function(dat) {
                        if(dat.errorCode === 200){
                            dat.data.forEach(value => {
                                let _li = `<li>
                                    <div class="top">
                                        <span class="rj">${value.type_name}</span>
                                        <img src="${value.image_src}" alt="" class="m">
                                        <p>学科: ${value.subject_name}</p>
                                    </div>
                                    <div class="bottom">
                                        <div class="left">
                                            <span>${value.title}</span>
                                            <span class="time">地区: ${value.area_name}</span>
                                            </div>
                                            <div class="right" cid="${value.cid}">免费学习</div>
                                            </div>
                                            </li>`
                                $("#course-type-1")[0].innerHTML += _li
                            })
                        }
                    }
                })
            }

            //如果模板字符串的方式，只能通过事件委托的形式完成事件添加
            $("#course-type-1").on("click", ".right", function(){
                window.location = "./pafes/videoDetail.html?cid=" + this.getAttribute("cid")
            })

            //3.加载精品课程
            function initBoutique() {
                $.ajax({
                    url: "http://192.168.11.206:3000/course/boutique",
                    type: "GET",  
                    success: function(dat) {
                        if(dat.errorCode === 200) {
                            dat.data.forEach(value => {
                                let $li = $("<li>")
                                let $div1 = $("<div>").addClass("top")
                                let $span = $("<span>").addClass("rj").text(value.type_name)
                                let $img = $("<img>").prop("src", value.image_src).addClass("m")
                                let $p = $("<p>").text("学科: " + value.subject_name)
                                $div1.append($span).append($img).append($p)
                                $li.append($div1)
                                let $div2 = $("<div>").addClass("bottom")
                                let $divx1 = $("<div>").addClass("left")
                                let $spanx1 = $("<span>").text(value.title)
                                let $spanx2 = $("<span>").addClass("time").text("地区: " + value.area_name)
                                $div1.append($divx1).append($spanx2)
                                let $divx2 = $("<div>").addClass("right").text(value.price + "元 学习")
                                $div2.append($divx1).append($divx2)
                                $li.append($div2)
                                
                                //添加单击事件，鼠标点击时跳转到课程详情页面
                                $divx2.click(function() {
                                    window.location = "./pages.videoDetail.html?cid=" + value.cid
                                })
                                $("#course-type-2").append($li)
                            })
                        }
                    }
                })
            }

            /** 判断用户信息展示*/
            function initUserInfo() {
                let user = JSON.parse(localStorage.getItem("user") || '{}')
                console.log(user, "本地存储")
                if(user.username) {
                    $(".user").css("display", "inline-block")
                    $(".login").css("display", "none")
                    $(".user .userlist li").eq(0).text(user.realname)
                    $(".user .userlist li").eq(4).click(function() {
                        location = "./pages/userSeting.html"
                    })
                } else {
                    $(".login").css("display", "inline-block")
                    $(".user").css("display", "none")
                }
            }
        initBanner()//加载轮播图
        initSyncCourse()//加载同步课程
        initBoutique()//加载精品课程
        initUserInfo() //展示登陆用户信息
        //搜索课程
        $("#search-btn").click(function() {
            window.location = "./pages/search_list.html?keyword=" + $("#keyword").val()
        })
    })
    </script>
</body>

</html>